<template>
  <div class="tabbar">
    <van-tabbar v-model="active" active-color="#EF6800" @change="tabbarChange">
      <van-tabbar-item>
        <span>首页</span>
        <template #icon="props">
          <img
            :src="
              props.active
                ? getAssetsFile('tabbar/home1-1.png')
                : getAssetsFile('tabbar/home1.png')
            "
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>产品</span>
        <template #icon="props">
          <img
            :src="
              props.active
                ? getAssetsFile('tabbar/product1-1.png')
                : getAssetsFile('tabbar/product1.png')
            "
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <img
            :src="
              props.active
                ? getAssetsFile('tabbar/mine1-1.png')
                : getAssetsFile('tabbar/mine1.png')
            "
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="ts">
import getAssetsFile from "@/utils/getImageurl";
import { useRoute, useRouter } from "vue-router";
import { computed } from "vue";
const route = useRoute();
const router = useRouter();
const active = computed(() => {
  if (route.name == "home") {
    return 0;
  } else if (route.name == "product") {
    return 1;
  } else if (route.name == "mine") {
    return 2;
  }
});

const tabbarChange = (active: number | string) => {
  if (active == 1) {
    router.push("/h5/product");
  } else if (active == 0) {
    router.push("/h5/home");
  } else if (active == 2) {
    router.push("/h5/mine");
  }
};
</script>
<style scoped lang="scss">
.tabbar {
  padding-bottom: constant(safe-area-inset-bottom);
}
</style>
